<template>
<div>
  <button @click='reData()'>
    reData数据 复原 
  </button>
  <div>
    <button @click='add()'>
    addEvent数据新增
  </button>
  </div>
  <ul style="font-size: 12px;">
    <li v-for='item in eventDataN'>{{item}}</li>
  </ul>
</div>


</template>

<script setup>
  // 从数据库中导入
  import testData from '@/dataBase/localStorageDataBase.js'

  import {ref,reactive,computed} from 'vue'
  import {nanoid} from "nanoid";

  import {getEventData,addEvent} from '@/utils/dataBaseTool.js'
  import JSS from '@/utils/JSONTool.js'

  let eventData = ref(getEventData())
  let eventDataN = reactive({
    // 防止 失去响应式
    data:getEventData()
  })


  function add(){
    console.log(JSS(eventData.value))
    console.log(JSS(eventDataN))
    addEvent()
    eventData.value = getEventData()
    eventDataN.data = getEventData()
    console.log(JSS(eventData.value))
    console.log(JSS(eventDataN))
    console.log("==============")
  }



  // 将 本地缓存数据库 数据 复原 
  function reData(argument) {
    localStorage.setItem('TodoDataBase',JSON.stringify(testData))
  }

</script>

<style scoped>
button{
  display: block;
}
</style>
